<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BDMAP</title>
    <style type="text/css">
        html {height: 100%}
        body {height: 100%;margin: 0px;padding: 0px}
        #container {height: 100%}
    </style>
    <!--下一个标签引入百度地图BMAP,API-->
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=pQobgLSIsBiCsxACVjDZ1ynEKiVm6pic"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
        <script type="text/javascript" src="CoordinateTransform.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<script type="text/javascript" src="qwebchannel.js"></script>
</head>
<body>
    <!--div 元素用来显示地图-->
	<div id="container"></div>
</body>
</html>

<script type="text/javascript">
    var map = new BMap.Map("container");  // 创建地图实例
    // 新疆为中心显示
    // map.centerAndZoom(new BMap.Point(74.939631,53.078577),6); 

    // 全国显示视角
    map.centerAndZoom(new BMap.Point(75.939631,58.078577),5);  // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(); //开启滚轮缩放
    map.disableDoubleClickZoom();
    // map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, showZoomInfo: true })); // 导航控件，去除
    // map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(80, 50)})); // 地图类型控件，去除
    // map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 尺度控件图标，去除

    // 设置预设的深色系样式
    map.setMapStyleV2({
    styleId: 'dark'
    });

        // 接收来自MapBridge的提示数据并添加提示框
    function addTips(lng, lat, prjName, prjState, iState) {
        var point = new BMap.Point(lng, lat);
        var stateColor = "#268BFF";
        var iconHtml = `<img src="./bulidLoc.png" style="width: 16px; height: 16px; vertical-align: middle; margin-right: 5px;">`;
        var icon;    
        if (iState === "0") {
            stateColor = "#0E7C00";
            icon = new BMap.Icon('./finishedLoc.png', new BMap.Size(30, 30));
        } else if (iState === "1") {
            stateColor = "#8D2341";
            icon = new BMap.Icon('./bulidLoc.png', new BMap.Size(30, 30));
        } else if (iState === "-1"){
            stateColor = "red";
            icon = new BMap.Icon('./bulidLoc.png', new BMap.Size(30, 30));
        }else{
            icon = new BMap.Icon('./finishedLoc.png', new BMap.Size(30, 30));
        }
        

        var labelContent = `<span style="color: black; font-weight: bold;">${prjName}</span> <span style="color: ${stateColor}; margin-left: 15px;">${prjState}</span>`;
        var label = new BMap.Label(labelContent, {
            offset: new BMap.Size(0, -40), // 调整偏移量以适应30px高度
            height: 40 // 设置提示框高度为40px
        });
        label.setStyle({
            border: '1px solid #ccc',
            padding: '5px 10px',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            borderRadius: '5px',
            fontSize: '16px',
            boxShadow: '0 0 5px rgba(0, 0, 0, 0.3)'
        });
        var marker = new BMap.Marker(point, {icon: icon});

        // 将Marker添加到地图上
        map.addOverlay(marker);

        map.addOverlay(label);
        label.setPosition(point);
    }

    function addInfoWindow(lng, lat, prjName, prjState) {
        var point = new BMap.Point(lng, lat);
        var content = `<strong>${prjName}</strong><br>${prjState}`;
        var infoWindow = new BMap.InfoWindow(content);
        map.openInfoWindow(infoWindow, point);
    }

    new QWebChannel(qt.webChannelTransport, function(channel) {
        window.bridge = channel.objects.bridge;//注册一个通道,将桥梁连接到qt下的bridge，形成通路
    });

</script>
